<template>
  <link rel="stylesheet" href="/assets/css/indent-details.css" />

  <!-- 导航栏 -->
  <van-nav-bar
    title="物流信息"
    left-text="返回"
    left-arrow
    @click-left="back"
    fixed
    z-index="100"
  />

  <div class="near-box">
    <div class="jd-qrdd-bigbox">
        <!--商品地址管理部分-->
        <div class="indent-details-box">
            <span class="indent-details-img1"></span>
            <span class="indent-details-text1">{{info.order.status_text}}</span>
            <span v-if="info.order.expid" class="indent-details-text2">
              快递公司：{{info.order.name}}<br />
              快递单号：{{info.order.expcode}}
            </span>
            <span v-else class="indent-details-text2">
              暂无物流信息
            </span>
        </div>

        <!--地址部分-->
        <div class="jd-qrdd-a1" v-if="info.address">
            <span class="qrdd-a1-t1">{{info.address.consignee}}</span>
            <span class="qrdd-a1-t1">{{info.address.mobile}}</span>
            <span class="qrdd-a1-t2" v-if="info.address.status == '1'">默认</span>
            <div class="qrdd-a1-b1">
                <span class="qrdd-a1-img1"></span>
                <span class="qrdd-a1-t3">{{info.address.region_text}} {{info.address.address}}</span>
            </div>
            <span class="qrdd-a1-img2"></span>
        </div>
    </div>
  </div>

  <van-steps direction="vertical" :active="0" v-if="express.length > 0">
    <van-step v-for="item in express" :key="item.id">
      <h3>{{item.context}}</h3>
      <p>{{item.time}}</p>
    </van-step>
  </van-steps>
</template>

<script>
  export default {
    name: 'OrderExpress',
    created()
    {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0

      this.OrderData()

      this.ExpressData()

    },
    data()
    {
      return {
        orderid: 0,
        LoginUser: this.$cookies.get('LoginUser'),
        express: [],
        info: {
          order:{
            express:{}
          },
          address:{},
          product:[],
          contact:''
        }
      }
    },
    methods:{
      back()
      {
        this.$router.go(-1)
      },
      //拨打客服电话
      Call()
      {
        this.$dialog.confirm({
          title:'拨打电话',
          message:'是否确认拨打官方客服热线'
        }).then(() => {
          location.href = `tel:${this.info.contact}`
          return
        })
        .catch(() => {})
      },
      //订单数据
      async OrderData()
      {
        //组装数据
        var data = {
          userid:this.LoginUser.id,
          orderid:this.orderid
        }

        var result = await this.$api.orderInfo(data)

        if(result.code != '1')
        {
          //提醒信息
          this.$notify({
            type:'error',
            message:result.msg,
            duration:1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
          return false
        }

        this.info = result.data
      },
      //查询物流信息
      async ExpressData()
      {
        //组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid
        }

        var result = await this.$api.orderExpress(data)

        if(result.code == 0)
        {
          //提醒信息
          this.$notify({
            type:'error',
            message:result.msg,
            duration:1000,
          })

          return false
        }

        this.express = result.data
      }
    }
  }
</script>


<style>
  .near-box{
    margin-top:4em;
  }

  .jd-qrdd-bigbox{
    margin-bottom:0!important;
    padding-bottom:0;
  }
</style>